<template>
    <div class="platform-session">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="账号">
                <el-input v-model="searchForm.name" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="searchForm.code" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="sessionId"
                border
                stripe
                default-expand-all
                size="small"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="user.account"
                    label="账号"
                    width="*">
            </el-table-column>
            <el-table-column
                    prop="user.username"
                    label="用户名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="host"
                    label="登录地址"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="startTime"
                    label="登录时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="lastAccessTime"
                    label="最后一次活跃时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleLogout(scope.$index, scope.row)">注销
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {listSession, logoutSession} from "../../../../api/platform/session";

    export default {
        name: "Session",
        data() {
            return {
                tableData: [],
                searchForm: {
                    account: "",
                    username: ""
                }
            };
        },
        methods: {
            listSession() {
                listSession().then(response => {
                    this.tableData = response.data.sessions
                }).catch(error => {
                    console.log(error)
                })
            },
            handleLogout(index, row) {
                logoutSession(row.sessionId).then(response => {
                    this.listSession()
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {

            },
            handleReset() {
                this.searchForm = {}
            },
            handleRefresh() {
                listSession().then(response => {
                    this.tableData = response.data.sessions
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        created() {
            this.listSession()
        }
    }
</script>

<style scoped>

</style>